<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container-1 {
      border: 1px solid black;
      width: 100px;
      height: 100px;
      display: grid;
      place-items: center;
    }

    .item-1 {
      width: 30px;
      height: 30px;
      border: 1px solid red;
    }

    .container-2 {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      /* gap: 10px; */
      justify-items: stretch;
      justify-content: center;
      /* grid-auto-flow: column; */
    }

    .item-2:nth-of-type(1) {
      background-color: rgb(153, 153, 255);
      grid-area: 1 / 1 / 2 / 3;
    }

    .item-2:nth-of-type(2) {
      background-color: rgb(0, 217, 255);
    }

    .item-2:nth-of-type(3) {
      background-color: rgb(0, 132, 255);
    }

    .item-2:nth-of-type(4) {
      background-color: rgb(0, 255, 106);
    }

    .item-2:nth-of-type(5) {
      background-color: rgb(255, 81, 168);
    }

    .item-2:nth-of-type(6) {
      background-color: rgb(78, 209, 165);
    }

    .item-2:nth-of-type(7) {
      background-color: rgb(187, 255, 0);
    }

    .item-2:nth-of-type(8) {
      background-color: rgb(88, 138, 31);
    }

    .item-2:nth-of-type(9) {
      background-color: rgb(255, 0, 21);
    }

    .container-3 {
      margin-top: 30px;
      display: grid;
      width: 130px;
      border: 1px solid black;
      grid-template-columns: repeat(auto-fill, 40px);
    }

    .item-3 {
      height: 40px;
    }

    .item-3:nth-of-type(1) {
      background-color: rgb(153, 153, 255);
    }

    .item-3:nth-of-type(2) {
      background-color: rgb(0, 217, 255);
    }

    .item-3:nth-of-type(3) {
      background-color: rgb(0, 132, 255);
    }

    .item-3:nth-of-type(4) {
      background-color: rgb(0, 255, 106);
    }

    .item-3:nth-of-type(5) {
      background-color: rgb(255, 81, 168);
    }

    .container-4 {
      margin-top: 30px;
      display: grid;
      width: 130px;
      border: 1px solid black;
      grid-template-columns: repeat(4, 1fr);
    }

    .item-4 {
      height: 40px;
    }

    .item-4:nth-of-type(1) {
      background-color: rgb(153, 153, 255);
    }

    .item-4:nth-of-type(2) {
      background-color: rgb(0, 217, 255);
    }

    .item-4:nth-of-type(3) {
      background-color: rgb(0, 132, 255);
    }

    .item-4:nth-of-type(4) {
      background-color: rgb(0, 255, 106);
    }

    .item-4:nth-of-type(5) {
      background-color: rgb(255, 81, 168);
    }
  </style>
</head>

<body>
  <!-- <div class="container-1">
    <div class="item-1"></div>
  </div> -->
  <div class="container-2">
    <div class="item-2">1</div>
    <div class="item-2">1</div>
    <div class="item-2">1</div>
    <div class="item-2">1</div>
    <div class="item-2">1</div>
    <div class="item-2">1</div>
    <div class="item-2">1</div>
    <!-- <div class="item-2"></div> -->
    <!-- <div class="item-2"></div> -->
  </div>
  <div class="container-3">
    <div class="item-3"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
  </div>
  <div class="container-4">
    <div class="item-4"></div>
    <div class="item-4"></div>
    <div class="item-4"></div>
    <div class="item-4"></div>
    <div class="item-4"></div>
  </div>
</body>

</html>